<template>
  <div class="box">
    <van-nav-bar
      title="京东注册"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft()"
    />
    <div class="input" style="padding: 50px 0px">
      <!-- vant表单组件 -->
      <van-form @submit="onSubmit()">
        <van-cell-group inset>
          <van-field v-model="value1" placeholder="请输入手机号" />
        </van-cell-group>
        <div style="margin: 80px 10px">
          <!--收集电话号码 -->
          <van-button
            round
            block
            :disabled="value1.length !== 11"
            type="primary"
            native-type="submit"
          >
            下一步
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { yanzhengtel } from "../../service/regist";
import { showConfirmDialog } from "vant";
import { useRouter } from "vue-router";
// import { useStore } from "vuex";

import { ref } from "vue";
import { useCounterStore } from "@/stores/counter";
let router = useRouter();
// let store = useStore();
let store =useCounterStore()
let value1 = ref("");

let onClickLeft = () => {
  history.back();
};
function onSubmit() {
  yanzhengtel({ tel: value1.value }).then((res) => {
    // console.log(res);
    if (res.data.code !== "200") {
      // vant轻提示
      showConfirmDialog({
        title: "提示",
        message: `手机号已被注册,是否去登录`,
      })
        .then(() => {
          router.push("/login");
        })
        .catch(() => {});
      //检验电话号码基本格式
    } else if (
      value1.value[0] === "1" &&
      value1.value[1] !== "2" &&
      value1.value[1] !== "1"
    ) {
      showConfirmDialog({
        title: "标题",
        message: `确定要向${value1.value}发送验证码吗`,
      })
        .then(() => {
          store.chanphonenumber(value1.value);
          router.push("/regist/step2");
          // console.log("提交");
        })
        .catch(() => {});
    } else {
      showConfirmDialog({
        title: "提示",
        message: `请填写正确的电话号码`,
      });
    }
  });
}

</script>

<style lang="scss" scoped>
.box {
  background-color: #f5f5f5;
  height: 100vh;
}
.input {
  margin: 10px;
}
</style>
